<script setup lang="ts">
import { ref, computed } from "vue";
import { useStore } from "vuex";
import {useRoute} from "vue-router"
const Route = useRoute();
const textAreaRef = ref();
const showEmoji = ref(false);
const $store = useStore();
const $emits = defineEmits(["close", "submit"]);
const $props = defineProps(["item", "type"]);
const avatar = computed(() => {
  return $store.state.user.userInfo.avatar;
});
const handleChangeEmoji = () => {
  console.log(11);
  showEmoji.value = !showEmoji.value;
};

const handleInputChange = (e) => {
  let value = e.target.innerHTML;
  if (value) {
    e.target.classList.add("has-content");
  } else {
    e.target.classList.remove("has-content");
  }
};

const handleSelectEmoji = (url) => {
  console.log(url, "--url--");
  handleChangeEmoji();
  createImg(url);
};

const createImg = (url) => {
  const img = document.createElement("img");
  img.src = url;
  textAreaRef.value.appendChild(img);
  // 创建一个新的 Range 对象
  const range = new Range();
  // 将 Range 对象设置为 textAreaRef 的末尾
  range.selectNodeContents(textAreaRef.value);
  range.collapse(false); //是否全部选中
  // 获取当前的 Selection 对象
  const selection = window.getSelection();
  // 清除之前的选区
  selection.removeAllRanges();
  // 将新的 Range 对象添加到选区中
  selection.addRange(range);
  if (textAreaRef.value.innerHTML !== "") {
    textAreaRef.value.classList.add("has-content");
  } else {
    textAreaRef.value.classList.remove("has-content");
  }
};

const handleOnSubmit = () => {
  console.log("发表", textAreaRef.value.innerHTML);
  const requestObj = {};
  if ($props.type !== "2") {
    requestObj.content = textAreaRef.value.innerHTML;
    requestObj.userId = $store.state.user.userInfo.id;
    requestObj.istop = 0;
    requestObj.replyId = $props.item.id;
    requestObj.forumId = $props.item.forumId;
    requestObj.groupId = $props.item.groupId;
  } else {
    requestObj.content = textAreaRef.value.innerHTML;
    requestObj.userId = $store.state.user.userInfo.id;
    requestObj.istop = 0;
    requestObj.replyId = $props.item.id;
    requestObj.forumId = Route.params.id;
  }
  console.log($store.state.user.userInfo.id);
  console.log(requestObj, "tijiao");
  $emits("submit", requestObj, $props.item);
};

const handleCancel = () => {
  console.log("close");
  $emits("close");
};
</script>

<template>
  <div class="comment-box">
    <div class="comment-avatar">
      <img :src="avatar" alt="" />
    </div>
    <div class="comment-right">
      <div
        class="comment-textarea"
        contenteditable="true"
        ref="textAreaRef"
        @input="handleInputChange"
        placeholder="说点什么呢"
      ></div>
      <div class="bottom-btn">
        <svg-icon name="emoil" @click="handleChangeEmoji"></svg-icon>
        <div class="btn-group">
          <el-button type="info" @click="handleCancel">取消</el-button>
          <el-button type="danger" @click="handleOnSubmit">发表</el-button>
        </div>
      </div>
      <div class="emoji-wrap" v-if="showEmoji">
        <div class="emoji">
          <Emoji @changeEmoji="handleSelectEmoji" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.comment-box {
  padding: 10px;
  margin-top: 10px;
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
  .comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .comment-right {
    flex: 1;
    position: relative;
    .comment-textarea {
      min-height: 122px;
      position: relative;
      padding-top: 10px;
      padding-left: 10px;
      margin-left: 10px;
      // border: 1px solid cyan;
      &::after {
        font-size: 14px;
        content: attr(placeholder);
        color: #666;
        position: absolute;
        top: 10px;
      }
      &.has-content::after {
        display: none;
      }
    }
    .bottom-btn {
      align-items: center;
      margin-top: 10px;
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
    }
    :deep svg {
      cursor: pointer;
    }
    .emoji-wrap {
      position: absolute;
      left: 20px;
      top: -70px;
      z-index: 10;
    }
  }
}
</style>
